<script setup lang="ts">
import { ref, reactive } from 'vue'
import TitleBar from '@/components/common/TitleBar.vue'

import DialogueList from './DialogueList.vue'
</script>

<template>
  <div class="container">
    <title-bar>查询</title-bar>
    <div class="main">
      <!-- 查询表单 -->
      <el-form ref="formRef" label-width="auto">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="Token名称：">
              <el-input placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会话ID：">
              <el-input placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会话名称：">
              <el-input placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="用户ID：">
              <el-input placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名：">
              <el-input placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="开始时间：">
              <el-date-picker type="date" placeholder="请选择日期" style="flex: 1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间：">
              <el-date-picker type="date" placeholder="请选择日期" style="flex: 1" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button>重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 查询结果 -->
      <dialogue-list />
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.main {
  padding: 20px;
}
</style>
